<template>

	<view class="grace-padding">
		<view @click="facechange" class="myface">
			<image :src="myFace" mode="scaleToFill"></image>
		</view>
		<view class="user">
			<text class="username" style="height: 25px;">{{user.u_name}}</text>
			<text class="logoff" v-if="true" @click="logoff">注销</text>
		</view>
		<view class="grace-box-banner" style="margin:10rpx 0;">
			<view class="garce-items">
				<view class="line1">{{user.artCount}}</text></view>
				<view class="line2">文章</view>
			</view>
			<view class="garce-items">
				<view class="line1">{{user.u_integral}}</text></view>
				<view class="line2">积分</view>
			</view>
			<view class="garce-items">
				<view class="line1">{{user.u_remainder}}</text></view>
				<view class="line2">余额</view>
			</view>
			<view class="garce-items">
				<view class="line1">0</text></view>
				<view class="line2">消息</view>
			</view>
		</view>
		<view class="grace-title grace-nowrap grace-space-between">
			<view class="grace-h5 grace-blod">我的文章</view>
		</view>
		<view class="myart-list" v-for="(item, index) in arts" :key="index">
			<view class="title">{{item.art_title}}</view>
			<view class="btns">
				<view :data-artid="item.art_id" @tap="editArt">编辑</view>
				<view :data-artid="item.art_id" :data-index="index" @tap="removeArt">删除</view>
			</view>
		</view>
		<view v-if="myFace" class="loadMore" @tap="getArtList">{{loadMore}}</view>
	</view>
</template>

<script>
	var loginRes, _self, page = 1;
	export default {
		data() {
			return {
				myFace: '',
				user: {},
				arts: [],
				loadMore: '点击加载更多',
			};
		},
		methods: {
			facechange() {
				uni.chooseImage({
					count: 1,
					sizeType: 'origin',
					success: (res) => {
						uni.showLoading({
							title:"正在更换..."
						})
						// console.log(111,res);
						let uid = uni.getStorageSync('SUID')
						let imgpath=res.tempFilePaths[0]
						// console.log(imgpath);
						// console.log('O(∩_∩)O哈哈~',uid,imgpath);
						uni.uploadFile({
									url:this.apiServer+'uploadface',
									filePath: imgpath,
									name: 'file',
									formData: {
										uid: uid
									},
									success: (res) => {
										this.myFace=JSON.parse(res.data).imgurl
										uni.setStorageSync('SFACE',JSON.parse(res.data).imgurl)
									},
									complete: () => {
										uni.hideLoading()
									}
								});
						
					},
				})
			},
			logoff: function() {
				uni.removeStorageSync('SUID');
				uni.removeStorageSync('SNAME');
				uni.removeStorageSync('PHONE');
				uni.removeStorageSync('EMAIL');
				uni.removeStorageSync('SFACE');
				this.myFace=''
				this.user={}
				this.arts=[]
				uni.showToast({
					title: "您已经退出悦读",
					icon: "none"
				});
				setTimeout(function() {
					uni.switchTab({
						url: '../index/index'
					});
				}, 1000);
			},
			editArt: function(e) {
				var artId = e.currentTarget.dataset.artid;
				uni.navigateTo({
					url: "../editArt/editArt?artId=" + artId
				});
			},
			removeArt: function(e) {
				var artId = e.currentTarget.dataset.artid;
				var index = e.currentTarget.dataset.index;
				uni.showModal({
					title: "提示",
					content: "确定要删除吗?",
					success: function(e) {
						if (e.confirm == true) {
							uni.request({
								url: _self.apiServer + 'removeArt',
								method: 'POST',
								header: {
									'content-type': "application/x-www-form-urlencoded"
								},
								data: {
									uid: loginRes[0],
									artId: artId
								},
								success: function(res) {
									if (res.data.message == 'ok') {
										uni.showToast({
											title: "已删除",
											icon: "none"
										});
										_self.arts.splice(index, 1);
									} else {
										uni.showToast({
											title: "删除失败",
											icon: "none"
										});
									}
								}
							});
						}
					},
				});
			},
			getArtList: function() {
				if (this.loadMore != '点击加载更多') {
					return;
				}
				this.loadMore = '加载中...';
				uni.request({
					url: this.apiServer + 'arts?page=' + page,
					method: 'POST',
					header: {
						'content-type': "application/x-www-form-urlencoded"
					},
					data: {
						uid: loginRes[0],
					},
					success: res => {
						if (res.data.message == 'ok') {
							this.arts = this.arts.concat(res.data.data);
							page++;
							this.loadMore = '点击加载更多';
						} else if (res.data.message == 'empty') {
							this.loadMore = '已经加载全部';
						} else {
							this.loadMore = '点击加载更多';
						}
					}
				});
			}
		},
		onLoad: function() {
			_self = this;
			loginRes = this.checkLogin()
			if (!loginRes) {
				return false
			}
			this.myFace = loginRes[2];
		},
		onShow: function() {
			loginRes = this.checkLogin();
			if (!loginRes) {
				uni.showModal({
					title: '未登录',
					content: "是否前往登录？",
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '../login/login'
							})
						} else if (res.cancel) {
							uni.switchTab({
								url: '../index/index',
							})
						}
					}
				})
				return false;
			}
			this.myFace=loginRes[2]

			// 加载会员信息
			uni.request({
				url: this.apiServer + 'userinfo',
				method: 'POST',
				header: {
					'content-type': "application/x-www-form-urlencoded"
				},
				data: {
					uid: loginRes[0],
				},
				success: res => {
					// console.log(JSON.stringify(res));
					if (res.data.message == 'ok') {
						this.user = res.data.data;
					}
				}
			});
			//
			this.arts = [];
			page = 1;
			this.loadMore = '点击加载更多';
			this.getArtList();
		}
	}
</script>

<style lang="scss">
	.user {
		display: flex;
		align-items: center;
		flex-direction: column;
		margin: 10px 0;

		.logoff {
			margin: 0;
			padding: 0;
			color: #888888;
			font-size: 12px;
			z-index: 0;
		}

		.username {
			padding: 2px;
		}
	}

	.myface {
		width: 88px;
		height: 88px;
		border: 5px solid #F1F2F3;
		border-radius: 100%;
		margin: 15px auto;
	}

	.myface image {
		width: 88px;
		height: 88px;
		border-radius: 100%;
	}

	.myart-list {
		width: 100%;
		margin: 8px 0;
		overflow: hidden;
		border-bottom: 1px dashed #D7D8D9;
	}

	.myart-list .title {
		line-height: 2em;
		width: 100%;
	}

	.myart-list .btns {
		line-height: 2em;
		width: 100%;
	}

	.myart-list .btns view {
		float: right;
		padding: 0 6px;
		margin: 0 5px;
		color: #00B26A;
	}

	.myart-list .btns view:last-child {
		color: #F76260;
	}

	.loadMore {
		width: 100%;
		padding: 8px 0;
		text-align: center;
		color: #CCCCCC;
	}
</style>
